<template>
  <!-- 正在支付遮罩层 -->
  <view class="pay-mask" v-if="show">
    <view class="pay-mask-content">
      <view class="spinner-eff spinner-eff-3">
        <view class="circle circle-1"></view>
        <view class="circle circle-2"></view>
        <view class="circle circle-3"></view>
      </view>
      <view class="pay-mask-title">{{ pageData.title }}</view>
      <view class="pay-mask-msg">{{ pageData.subTitle }}</view>
      <view class="pay-mask-cancel-btn" v-if="isTooSlowly" @click="close(100)">取消</view>
    </view>
  </view>
</template>
<script setup>
import { onMounted, onUnmounted, reactive, ref } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "正在支付",
  },
  subTitle: {
    type: String,
    default: "请等待支付结果",
  },
});

const show = ref(false);

const isTooSlowly = ref(false);

const pageData = reactive({
  title: props.title,
  subTitle: props.subTitle,
});

// 计时
let openTime = 0;

const close = (delayed = 1000) => {
  return new Promise((resolve) => {
    // 如果打开时间小于1000毫秒，则延迟至少1000毫秒关闭
    if (new Date().getTime() - openTime < delayed) {
      const tiemr = setTimeout(() => {
        show.value = false;
        isTooSlowly.value = false;
        openTime = 0;
        clearTimeout(tiemr);
        resolve(true);
      }, delayed);
    } else {
      show.value = false;
      openTime = 0;
      resolve(true);
    }
  });
};

const open = () => {
  show.value = true;
  openTime = new Date().getTime();
};

const setDate = (title, subTitle) => {
  pageData.title = title;
  pageData.subTitle = subTitle;
};

defineExpose({
  open,
  close,
  setDate,
});

let interval = null;

onMounted(() => {
  interval = setInterval(() => {
    if (openTime && new Date().getTime() - openTime > 3000) {
      isTooSlowly.value = true;
    } else {
      isTooSlowly.value = false;
    }
  }, 1000);
});

onUnmounted(() => {
  clearInterval(interval);
  interval = null;
});
</script>
<style lang="scss" scoped>
.pay-mask {
  background-color: rgba(255, 255, 255, 0.616);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  .pay-mask-content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    .pay-mask-title {
      font-weight: bold;
      font-size: 12rpx;
    }
    .pay-mask-msg {
      font-size: 10rpx;
      color: gray;
      margin-top: 10rpx;
    }

    .pay-mask-cancel-btn {
      color: var(--kui-color-theme);
      margin-top: 20rpx;
      font-size: 10rpx;
    }
  }

  .spinner-eff {
    position: relative;
    width: 100px;
    height: 100px;
  }
  .spinner-eff:before,
  .spinner-eff:after {
    content: "";
    display: block;
  }
  .spinner-eff .spinner-bar:before,
  .spinner-eff .spinner-bar:after {
    content: "";
    display: block;
  }
  @keyframes pulse {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.3);
      opacity: 0;
    }
    100% {
      transform: scale(1.3);
      opacity: 0;
    }
  }
  @keyframes pulse-2 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1.3);
      opacity: 0;
    }
  }
  .spinner-eff.spinner-eff-3 .circle {
    border-radius: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(1);
    transform-origin: center center;
  }
  .spinner-eff.spinner-eff-3 .circle-1 {
    width: 100%;
    height: 100%;
    background-color: var(--kui-color-theme-light);
    top: 0;
    animation: pulse 1.6s linear 0s infinite;
  }
  .spinner-eff.spinner-eff-3 .circle-2 {
    width: 66.6%;
    height: 66.6%;
    background-color: var(--kui-color-theme);
    top: 16.5%;
    animation: pulse-2 1.6s linear 0s infinite;
  }
  .spinner-eff.spinner-eff-3 .circle-3 {
    width: 33.3%;
    height: 33.3%;
    background-color: var(--kui-color-theme);
    top: 33.3%;
  }
}
</style>
